<template>
  <div>
    <vue-ganttastic
      :columns="columns"
      :rows="rows"
    />
  </div>
</template>

<script>
import VueGanttastic from 'vue-ganttastic'
import moment from 'moment'
export default {
  components: {
    VueGanttastic
  },
  data() {
    return {
      columns: [
        { id: 'col1', title: '请求名称' },
        { id: 'col2', title: '开始时间' },
        { id: 'col3', title: '结束时间' }
      ],
      rows: [
        // 网络请求的数据将在这里填充
      ]
    }
  },
  methods: {
    async fetchNetworkRequests() {
      // 模拟异步网络请求的数据
      const requests = [
        { id: 1, name: '请求A', startTime: '2023-08-01 10:00', endTime: '2023-08-01 10:30' },
        { id: 2, name: '请求B', startTime: '2023-08-01 10:15', endTime: '2023-08-01 11:00' },
        { id: 3, name: '请求C', startTime: '2023-08-01 10:45', endTime: '2023-08-01 11:30' }
      ];
      
      // 将数据格式化为甘特图行的格式
      this.rows = requests.map(request => ({
        id: request.id,
        title: request.name,
        cells: [
          { columnId: 'col1', text: request.name },
          { columnId: 'col2', text: request.startTime },
          { columnId: 'col3', text: request.endTime }
        ],
        gantt: [
          {
            start: moment(request.startTime).valueOf(),
            end: moment(request.endTime).valueOf()
          }
        ]
      }));
    }
  },
  mounted() {
    this.fetchNetworkRequests();
  }
}
</script>

<style>
/* 这里可以根据需要进行样式自定义 */
</style>
